<template>
    <div v-if="filmInfo">
        <!-- <img :src="filmInfo.poster" alt=""> -->
        <!-- 封装header  自定义指令  -->
        <detial-header v-scroll="30">
          {{filmInfo.name}}
        </detial-header>
        <div :style="{
        backgroundImage:'url('+filmInfo.poster+')'
        }" class="poster">
        </div>
        <div class="content">
          <div class="infoTitle"> {{filmInfo.name}} <span class="type">{{filmInfo.filmType.name}}</span>
        </div>
          <div >
            <div class="detial-text"> {{filmInfo.category}}</div>
            <div class="detial-text">{{filmInfo.premiereAt|dataFilter}}上映</div>
            <div class="detial-text">{{filmInfo.nation}} | {{filmInfo.runtime}}分钟</div>
            <div class="detial-text-jie" :class="isHidden?'hidden':'' ">{{filmInfo.synopsis}} </div>
          </div>
          <div style="text-align:center;">
            <i class="iconfont " @click="isHidden=!isHidden" :class="isHidden?'icon-arrow-down-bold':'icon-arrow-up-bold' "></i>
          </div>
          <!-- 演职人员 -->
          <div>演职人员</div>
          <detial-swiper class="actorSwiper" :perview='3.5' name="actors">
            <detial-swiper-item v-for="(data,index) in filmInfo.actors" :key="index">
              <!-- <img :src="data.avatarAddress" alt=""> -->
              <div :style="{
        backgroundImage:'url('+data.avatarAddress+')'
        }" class="actorPoster"></div>
              <div class="actorName">{{data.name}}</div>
              <div class="actorRole">{{data.role}}</div>
            </detial-swiper-item>
          </detial-swiper>

          <!-- 剧照 -->
          <div>剧照</div>
          <detial-swiper class="actorSwiper" :perview='2' name="photos">
            <detial-swiper-item v-for="(data,index) in filmInfo.photos" :key="index">
              <div :style="{
        backgroundImage:'url('+data+')'
        }" class="actorPoster" @click="handlePreview(index)"></div>
            </detial-swiper-item>
          </detial-swiper>
        </div>
    </div>
</template>
<script>
import detialHeader from '@/components/detial/DetialHeader'
import detialSwiper from '@/components/detial/DetialSwiper'
import detialSwiperItem from '@/components/detial/DetialSwiperItem'
import '../assets/iconfont2/iconfont.css'
import http from '@/util/http'
import isShow from '@/util/mixinshow'
import Vue from 'vue'
import moment from 'moment'
import { ImagePreview } from 'vant'
moment.locale('zh-cn')
// console.log(moment().format())
Vue.filter('dataFilter', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})
Vue.directive('scroll', {
  inserted (el, binding) {
    console.log(el)
    window.onscroll = () => {
      // console.log('scroll')
      el.style.display = 'none'
      if (document.documentElement.scrollTop || document.body.scrollTop > binding.value) {
        // console.log('显示')
        el.style.display = 'block'
      } else {
        // console.log('隐藏')
        el.style.display = 'none'
      }
    }
  },
  // 离开的时候销毁事件
  unbind () {
    window.scroll = null
  }
})
export default {
  mixins: [isShow],
  data () {
    return {
      filmInfo: null,
      isHidden: true
    }
  },
  components: {
    detialSwiper,
    detialSwiperItem,
    detialHeader
  },
  created () {
  // 获取点击正在热映的电影ID信息
    console.log(this.$route.params.id)

    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=7216956`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      console.log(res.data.data.film)
      this.filmInfo = res.data.data.film
    })
  },
  //   mounted () {
  //   // 这些是底层dom写法  要用指令写法
  //     window.onscroll = () => {
  //       console.log('scroll')
  //       if (document.documentElement.scrollTop || document.body.scrollTop > 60) {
  //         console.log('显示')
  //       } else {
  //         console.log('隐藏')
  //       }
  //     }
  //   },
  //   destroyed () {
  //     window.onscroll = null
  //   }
  methods: {
    handlePreview (index) {
      ImagePreview({
        images: this.filmInfo.photos,
        startPosition: index,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    }
  }
}
</script>
<style scoped>
  .poster{
    width: 100%;
    height: 13.125rem;
    background-position: center;
    background-size: cover;
  }
  .content{
    padding-left: .9375rem;
    padding-top: .9375rem;
    overflow: hidden;
  }
  .detial-text{
    margin-top: 3px;
    color: #797d82;
    font-size: .8125rem;
  }
  .infoTitle{
    display: flex;
    font-size: 18px;
  }
  .type{
    display:block;
    font-size: 9px;
    color: #fff;
    background-color: #d2d6dc;
    height: 18px;
    line-height: 18px;
    padding: 0 2px;
    border-radius: 2px;
    margin: 3px;
  }
  .detial-text-jie{
    margin-top: .3125rem;
    color: #797d82;
    font-size: .8125rem;
    line-height: .9375rem;
  }
  .hidden{
    height: 1.875rem;
    overflow: hidden;
  }
  .actorPoster{
    height: 5.3125rem;
    width: 100%;
    background-size:cover;
    background-position: center;
  }
  .actorSwiper{
    margin-top: .5rem;
  }
  .actorName{
    font-size: .8rem;
    color: #191a1b;
    width: 85px;
    height: 18px;
    line-height: 18px;
    text-align: center;
  }
  .actorRole{
    font-size: 11px;
    color: #797d82;
    width: 85px;
    height: 16px;
    line-height: 16px;
    text-align: center;
  }

</style>
